<template>
	<view class="card" >
		<view class="content-container">
	<!-- 		<view class="title">天上人间</view> -->
			<view class="avatarbox">
				<img class="pic1" src="../../static/gingerbread.png"></view>
				<view class="title2">欢迎来到美食人间</view>
			</view>
			<view class="form">
				<image class="icon1" src="../../static/account.png" style="width: 45rpx;height: 45rpx;"></image>
				<view class="inputWrapper">
					<input class="input" type="text" v-model="email" onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"  placeholder="请输入邮箱账号"/>
				</view>
				<!-- <view class="view_line"></view> -->
				<image class="icon1" src="../../static/password.png"style="width: 50rpx;height: 55rpx;margin-top: 70rpx;"></image>
				<view class="inputWrapper">
					<input class="input" type="password" v-model="password" onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"  placeholder="请输入密码"/>
				</view>
				<!-- <view class="view_line"></view> -->
				<view class="loginBtn"@click="bindLogin"hover-class="bg-click">
					<text class="btnValue">登录\注册</text>
				</view>
				<view class="warning">
					<text style="color: #555555;">未注册的用户将直接创建用户</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				animationData2: {},
				email:"123@qq.com",
				password:"123456",
				token:"",
				username:" ",
			};
		},
		methods: {
			bindLogin(){
				const token = uni.getStorageSync('token');
				const username = uni.getStorageSync('username');
				const _this = this;
				const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if(_this.email === "" || _this.password === ""){
					uni.showToast({
						icon: 'none',
						title:"用户名和密码不能为空",
						duration:2000,
					});
				} else {
					if( reg.test(_this.email) === true  ){
						if((_this.email!="")&&(_this.password!="")){
							uni.request({
								url: 'http://10.50.28.38:8080/login',
								method: 'POST',
								data: {
									userId : _this.email, 
									passWord : _this.password,
								},
								header: {
								    'Content-Type':'application/json',
								    Authorization: token
								},
								success: (res) => {
									console.log(res.data.data);
									console.log(res.data.userName);
									console.log(res.header.authorization);
									if(res.data.code == 401||res.data.code == 403){
										uni.showToast({
											icon: 'none',
											title: '密码或用户名错误',
											duration:2000,
										});
										return;
									} else {
										if(res.data.code == 200){
											uni.showToast({
												icon: 'none',
												title: '登录成功',
												duration:2000,
											});
										}
										else if(res.data.code == 201){
											uni.showToast({
												icon: 'none',
												title: '注册成功',
												duration:2000,
											});
										}
										uni.setStorage({
											key: 'username',
											data: res.data.data.userName,
											success:function(){
												console.log(username);
												console.log("存储用户名到本地成功！");
											}
										})								
										uni.setStorage({
											key: 'token',
											data: res.header.authorization,
											success: function () {
												uni.getStorage({
												key: 'token',
													success: function (res) {
														console.log(token);
					
													}
												});
											}
										});
										uni.reLaunch({
											url:'./home',
										})
									}
								},
								fail: () => {console.log("失败")},
								complete: () => {}
							});
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '邮箱格式不正确哦',
							duration: 1000,
						});
					}
				}
			},
		},	
	}
</script>

<style lang="scss">
	.content-container{
		display: block;
		padding-top: 100rpx;
	}
	
	.card{
		width: 100vw;
		height: 100vh;
		background-color:#f3f3f3;


		// .title{
		// 	width: 100%;
		// 	height: 200rpx;
		// 	text-align: left;
		// 	font-size: 80rpx;
		// 	padding-left: 100rpx;
		// 	padding-top: 100rpx;
		// 	// margin-left: 100rpx;
		// 	// border: 1px solid #aaa;
		// }
		.avatarbox{
			display: flex;
			// border: 1px solid #ffaa00;
			flex-direction: column;
			justify-content: center;
			
			.pic1{
				border: 1px solid #ffaa00;
				border-radius: 50%;
				width: 250rpx;
				height: 250rpx;
				margin:50rpx auto 0rpx;/*居中对齐*/
			}
			
		}
		.title2{
			// width: 100%;
			// height: 100rpx;
			text-align: center;
			margin-top: 30rpx;
			font-size: 30rpx;
			// margin-left: 50rpx;
			// border: 1px solid #aaa;
		}
		
	}
	
	.form{
			padding: 0 100rpx;
			margin-top: 50rpx;
		}
		.icon1{
			position: absolute;
			left: 120rpx;
			margin-top: 25rpx;
			// width: 50rpx;
			// height: 50rpx;
			
		}
		.inputWrapper{
			width: 100%;
			height: 80rpx;
			background: transparent;
			// border-radius: 20rpx;
			border-bottom: 1px solid #303030;
			box-sizing: border-box;
			padding: 0 20rpx;
			margin-top: 50rpx;
		}
		.inputWrapper .input{
			width: 100%;
			height: 100%;
			text-align: left;
			font-size: 30rpx;
			margin-left: 80rpx;
		}
		.loginBtn{
			width: 100%;
			height: 80upx;
			background: #ffaa00;
			border-radius: 50rpx;
			margin-top: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.bg-click{
			top: 2upx;
			background-color: #ffaa7f;
		}
		.btnValue{
			color: white;
		}
		.warning{
			text-align: center;
			color: #000000;
			font-size: 15px;
			margin-top: 20px;
		}
</style>
